<template>
	<view class="wap">
		<view class="container">
			<view class="back-img">
				<image src="@/static/img/mine-header-bg.png">
				</image>
			</view>
			<view class="head">
				<view class="item title-item">
					<text class="title">可提现佣金</text>
				</view>
				<view class="item">
					<text class="balance">{{info.commission||'0.00'}}</text>
					<!-- <view class="tips-icon"></view>
					<view class="balance-tips">
						<text style="margin-right: 7px;">可兑换</text>
						<text class="amount" style="margin-right: 7px;">{{info.able_rebate||'0.00'}}
						</text>
						<text style="margin-right: 7px;">待审核</text>
						<text class="amount">{{info.verifing_rebate||'0.00'}}</text>
					</view> -->
				</view>
				<view class="item">
					<view class="button" @click="duihuan()">去提现</view>
				</view>
			</view>
			<view class="body">
				<view class="item head-item border-bottom">
					<view class="left"></view>
					<view class="right">
						<!-- <view class="cell-detail">2021-11</view> -->
						<picker mode="date" :value="date" fields="month" :start="startDate" :end="endDate"
							@change="bindDateChange">
							<view class="cell-detail">{{date}}</view>
						</picker>
						<image class="icon" src="@/static/img/arrow-bottom-black-ico.png">
						</image>
					</view>
				</view>
				<!-- <view class="item statistics-item border-bottom">
					<view>
						<text>报名收益</text>
						<text>￥0.00</text>
					</view>
					<view>
						<text>提现</text>
						<text>￥0.00</text>
					</view>
				</view> -->
				<view class="item statistics-item border-bottom" v-for="(item,index) in data.data_list" :key="index">
					<view>
						<view>
							<text style="color: #333;" v-if="item.type==5">提现驳回</text>
							<text style="color: #333;" v-else>{{item.memo}}</text>
							<text style="color: #e74c3c;" v-if="item.type==3&&item.memo">(原因:{{item.memo}})</text>
							<view>{{item.createtime}}</view>
						</view>
						<view>{{item.createtime}}</view>
					</view>
					<view>
						<text style="color: red;" v-if="item.money<=0">￥{{item.money}}</text>
						<text v-if="item.money>0">￥{{item.money}}</text>
					</view>
				</view>
				
				
				<view v-if="data.no_list" class="bottom-text">暂无数据</view>
				<view class="bottom-text" v-if="!data.no_list&&data.no_more">我也是有底线的~</view>
				<view class="bottom-text" style="color: #888;" v-if="!data.no_list&&!data.no_more">
							 加载中...
				</view>
			</view>
		</view>
		<uni-popup ref="popup1" type="center">
			<view class="amount-content">
				<view class="amount-title">请输入提现金额</view>
				<view class="amount-input">
					<input class="amount-input-img" @input="recordMoney" :value="money" placeholder="最低提现1.00元" type="number">
					</input>
				</view>
				<view @click="doCash" class="amount-bottom flex-x-center">
					<view>确认提现</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {getMyCommission,getCommissionLog,cashApply} from '../../apirequest/api.js';
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				date: currentDate,
				data:{
					data_list: [],
					no_list: !1,
					no_more: !1,
					current_page: 0,
					loading_more: !0,
				},
				lock:0,
				money:'',
				info:[],
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onLoad() {
			this.loadDataList();
		},
		onShow() {
			this.loadData();
		},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function (t) {
			var o = this;
			o.loadDataList(function () {
			  o.data.loading_more = !0;
			});
		},
		methods: {
			//获取数据
			loadData: function () {
			  getMyCommission({}).then((res) => {
			  		if(res.code == 1){
						this.info = res.data;
					} else{
						uni.showToast({
							title:res.msg,
							icon:"error"
						})
						setTimeout(function(){
							uni.navigateBack({
								delta:0
							});
						},1000)
					}
			  }).catch(err => {
			  	 console.log(err)
			  })
			  
			},	
			//获取数据列表
			  loadDataList: function (f) {
				var o = this;
				if (o.lock) {
					return;
				}
				if (o.data.no_list || o.data.no_more) "function" == typeof t && f();
				else {
				  var page = (o.data.current_page || 0) + 1;
				  var data = {
					page: page,
					date:o.date,
				  }
				  o.lock = 1;
				  console.log(o.lock)
				  getCommissionLog(data).then((t) => {
				  	if(t.code == 1){
						  if (1 == t.data.current_page && !t.data.data.length) {
							  o.data.no_list= !0;
							  o.data.loading_more= !1
						  }
						 if (t.data.data && t.data.data.length) {
							 o.data.data_list = o.data.data_list || [];
							 o.data.data_list = o.data.data_list.concat(t.data.data), 
							 o.data.current_page= page;
						 }	
					     if (!t.data.has_more) {
							 o.data.no_more= !0;
						 }						  
						 
				  	}else{
				  		uni.showToast({
				  			title:'网络繁忙',
				  			icon:'error'
				  		})
				  	}
					o.lock = 0;
				  });
				}
			  },
			  recordMoney(e) {  
				  this.money = e.detail.value;  
			  }, 
			//确定兑换提现
			doCash: function() {
				let that = this;
				console.log(parseFloat(that.money))
				console.log(that.info.commission)
				if (that.money=='') {
					uni.showToast({
						title:'请输入提现金额',
						icon:"error"
					});
					return;
				}
				
				if (parseFloat(that.money)<1) {
					uni.showToast({
						title:'最低提现1元',
						icon:"error"
					});
					return;
				}
				if (parseFloat(that.money)>parseFloat(that.info.commission)) {
					uni.showToast({
						title:'提现余额不足，请重新输入',
						icon:"error"
					});
					return;
				}
				if (that.lock) {
					return;
				}
				that.lock = 1;
				cashApply({type:'commission',money:that.money}).then((res) => {
					if(res.code == 1){
						uni.showToast({
							title:'提交成功，请等待审核',
							icon:"success"
						})
						setTimeout(function(){
							window.location.reload();
						},1000)
					} else{
						uni.showToast({
							title:res.msg,
							icon:"error"
						})
						setTimeout(function(){
							that.lock = 0;
						},1000)
					}
				}).catch(err => {
					 console.log(err)
				})
			},
			duihuan: function() {
				this.$refs.popup1.open()
			},
			bindDateChange: function(e) {
				this.date = e.target.value;
				this.data = {
					data_list: [],
					no_list: !1,
					no_more: !1,
					current_page: 0,
					loading_more: !0,
				};
				this.loadDataList();
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}`;
			}
		}
	}
</script>

<style scoped lang="scss">
	.wait {
		color: #4cd964
	}

	.success {
		color: #00a9e9
	}

	.fail {
		color: #f42f2f
	}

	.wap {
		/* 整体容器 */
	}

	.wap .container {
		position: relative;
		display: flex;
		flex-flow: column;
		align-items: center
			/* 背景图 */
			/* 头部 */
			/* 身体 */
	}

	.wap .container .back-img {
		width: 100%;
		position: absolute
	}

	.wap .container .back-img image {
		height: 176px;
		width: 100%
	}

	.wap .container .head {
		width: 331px;
		position: relative
	}

	.wap .container .head .item {
		margin-bottom: 14px;
		color: #fff;
		display: flex;
		flex-flow: column;
		align-items: center
	}

	.wap .container .head .item .title {
		font-size: 24rpx
	}

	.wap .container .head .item .balance {
		font-size: 42px;
		font-weight: bolder
	}

	.wap .container .head .item .tips-icon {
		width: 0;
		height: 0;
		border: 4px solid #fff;
		border-top-color: transparent;
		border-left-color: transparent;
		border-right-color: transparent
	}

	.wap .container .head .item .balance-tips {
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		height: 24px;
		padding: 0 9px;
		font-size: 10px;
		border-radius: 28px;
		background-color: #fff;
		color: grey
	}

	.wap .container .head .item .balance-tips .amount {
		color: #333;
		font-size: 28rpx;
		;
		font-weight: 700
	}

	.wap .container .head .item .button {
		font-size: 24rpx;
		font-weight: 700;
		width: 63px;
		height: 24px;
		border: 1px solid #fff;
		border-radius: 24px;
		text-align: center;
		line-height: 24px
	}

	.wap .container .head .title-item {
		align-items: flex-start;
		margin: 11px 0 0 0
	}

	.wap .container .body {
		width: 331px;
		position: relative;
		display: flex;
		flex-flow: column;
		align-items: center;
		background-color: #fff;
		border-radius: 7px;
		margin-bottom: 14px
	}

	.wap .container .body .item {
		display: flex;
		justify-content: space-between;
		width: 312px;
		padding: 14px 9px;
		font-size: 30rpx;
	}

	.wap .container .body .item .left .date-text {
		color: #bec1c7;
		margin-top: 3px
	}

	.wap .container .body .item .right .text-item {
		display: flex;
		justify-content: flex-end
	}

	.wap .container .body .item .right .amount-text {
		color: #f42019;
		font-weight: 700
	}

	.wap .container .body .item .right .amount-text .minus {
		color: #333
	}

	.wap .container .body .item .right .tips-text {
		margin-top: 3px;
		font-size: 24rpx
	}

	.wap .container .body .head-item {
		background-color: #fbfdfd
	}

	.wap .container .body .head-item .right {
		display: flex;
		align-items: center
	}

	.wap .container .body .head-item .right .icon {
		width: 11px;
		height: 11px;
		margin-left: 1px
	}

	.wap .container .body .statistics-item {
		background-color: #fbfdfd;
		color: #ccc;
		font-size: 24rpx
	}

	/* 兑换弹窗 */
	.bottom {
		justify-content: center;
		margin-top: -48px
	}

	.bottom image {
		width: 19px;
		height: 19px
	}

	.bottom .bottom-text {
		color: #bec1c7;
		font-size: 24rpx;
		margin-left: 9px
	}

	.amount-content {
		background-color: #fff;
		width: 240px;
		border-radius: 9px
	}

	.amount-content .amount-title {
		text-align: center;
		font-size: 28rpx;
		;
		color: #333;
		font-weight: 700;
		padding: 14px 0px
	}

	.amount-content .amount-input {
		background-color: #f4f5f7;
		width: 144px;
		margin: 0 auto;
		border-radius: 7px;
		height: 38px;
		display: flex;
		align-items: center
	}

	.amount-content .amount-input .amount-input-img {
		font-size: 30rpx;
		;
		color: #333;
		padding: 9px 0;
		text-align: center
	}

	.amount-content .amount-bottom {
		width: 100%;
		font-size: 28rpx;
	}

	.amount-content .amount-bottom view:nth-child(1) {
		width: 50%;
		text-align: center;
		padding: 14px 0px;
		color: #eb2622
	}

	.amount-content .amount-bottom view:nth-child(2) {
		width: 50%;
		text-align: center;
		padding: 14px 0px;
		color: #0da3db
	}
</style>
